<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>品牌列表案例</title>
  <script src="../Vue.js"></script>
<!--  //复选框绑定到一个数组上面,实现多选-->
</head>
<body>

<div id="app">
  <div>添加商品</div>
  <div>
    <label>
      id:
      <input type="text"  v-model="id">
    </label>

    <label>
      Name:
<!--      @keyup是绑定键盘
            @keyup.enter是绑定键盘上的回车键  同时还有.esc /.tab/ .delete/.up /.down /,right /.left
            也可以通过查询键盘码进行自定义 如f12的键盘码是113   @keyup.113 ="add()"
-->
      <input type="text" v-model="name" @keyup.enter="add()" >

    </label>
    <!--事件绑定后的方法后加括号，可以用来传递参数-->
    <button @click="add()" >
      添加
    </button>
    <label>
      搜索名称关键字:
<!--      通过在Vue自定义指令（v-model/v-bind）来实现开始自动获取焦点-->
<!--      v-red=" 'red' "  注意传递参数是 双引号里面加单引号-->
      <input type="text" v-model="keyword" v-focus v-red="'red'">
    </label>
  </div>

  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" >全选

      </th>
      <th>id</th>
      <th>name</th>
      <th>time</th>
      <th>operate</th>
    </tr>
    </thead>
    <tbody>

    <!--  将for中要循环的数组 变为一个方法，实现显示的数据 与 搜索的关键字联系-->
    <tr v-for="item in search(keyword)" :key="item.id">
      <td>
        <input type="checkbox" >
      </td>
      <td>{{item.id}}</td>
      <td>--{{item.name}}--</td>
      <td>{{item.time  | times('') }}</td>
      <td ><a href="" @click.Prevent="delet(item.id)">删除</a></td>
    </tr>
    </tbody>
  </table>
</div>


<!--演示私有过滤器以及私有指令-->
<div id="app2">
  <h3 >{{time | times('yyyy-mm-dd')}}</h3>
  <h3 v-fontsize="50">私有指令</h3>

</div>

<script>

// <!--  自定义指令,完成开始自动获取焦点-->
Vue.directive('focus',{
  //下面所有的函数被称为钩子函数 第一个指令都是绑定的元素对象 原生的js对象

  bind:function (el,) {
  //  在绑定的时候执行一次，一般绑定样式 因为样式在加载的时候就会被解析

  },
  inserted:function (el,) {
  //插入到dom中时，执行一次   一般可以绑定与js有关的行为，最好放在inserted中 防止不生效
  //获取焦点 需要插入到dom中后 才能获取焦点
      el.focus()
  },
  update:function (el) {
  //在更新时执行


  }
});
Vue.directive('red',{

  bind:function (el,binding) {
      //第二个是一个对象  绑定时传回来的参数 可以有多个
      //属性有 name ： 绑定指令的名字不加 v-
      //   value 绑定的值 如果是“‘1+1’” 则值是2
      //expression 绑定的原值 不行进行计算
      el.style.color = binding.value ;
  },
  inserted:function (el,) {
  },
  update:function (el) {


  }
});


<!-- 自定义全局键盘码-->
//这样定义完成之后， @keyup.f2="add()" 之后  点击f2就可以执行add方法了
Vue.config.keyCodes.f2=113;

<!--  全局过滤器-->
Vue.filter('times' ,function (dataStr,pattern) {
//  获取时间的字符串
  var t = new Date(dataStr);
//  将时间格式化为 yyyy-mm-dd
  var y = t.getFullYear();
  //月是从0开始的 所以加一
  //String.padStart（将字符串补充为多少位，‘用什么来补充’）
  // 下面是补充为两位 用0来补充
  var m = (t.getMonth() + 1).toString().padStart(2,'0');
  var d = t.getDay().toString().padStart(2,'0');

  //tolowerCase
  if (pattern.toLowerCase() === 'yyyy-mm-dd'){
  return y + '-' + m + '-' +d;
  }else{
    var hh = t.getHours().toString().padStart(2,'0');
    var mm = t.getMinutes().toString().padStart(2,'0');
    var ss = t.getMinutes().toString().padStart(2,'0');

    return y + '-' + m + '-' +d + '  ' +hh +':' + mm + ':' + ss+'';
  }
});



new Vue({
  el:'#app2',
  data: {
    time: new Date(),
  },
  methods:{

  },
  //私有的过滤器 在私有过滤器与全局过滤器同名的时候 优先使用私有的
  filter: {
    times:function (dataStr,pattern) {

//  获取时间的字符串
      var t = new Date(dataStr);
//  将时间格式化为 yyyy-mm-dd
      var y = t.getFullYear();
      //月是从0开始的
      var m = t.getMonth() + 1;
      var d = t.getDay();

      //tolowerCase
      if (pattern.toLowerCase() === 'yyyy-mm-dd'){
        return y + '-' + m + '-' +d;
      }else{
        var hh = t.getHours();
        var mm = t.getMinutes();
        var ss = t.getMinutes();

        return y + '-' + m + '-' +d + '  ' +hh +':' + mm + ':' + ss+'';
      }
    }
  },

  //自定义私有指令
  directives:{

    // 'fontsize': {
    //   bind:function (el,binding) {
    //     el.style.color = 'red';
    //     el.style.fontSize = parseInt(binding.value)+'px';
    //   },
    //   inserted:function (el,) {
    //   },
    //   update:function (el) {
    //   }
    // }

  //  钩子函数简写,因为bind update比较常用  这样写等于在这两个函数中各写一份
    'fontsize' : function (el,binding) {
      el.style.fontSize = parseInt(binding.value)+'px';
    }
  }
});

  new Vue({
    el:'#app',
    data:{
      id:'',
      name: '',
      keyword:'',
      list:[
        {id:1 , name:'小明' , time:new Date()},
        {id:2 , name:'小红' , time:new Date()},
        {id:3 , name:'小芳' , time:new Date()},
      ]
    },
    methods:{
      add(){
        this.list.push({id:this.id  , name:this.name , time:new Date()});
        this.id = '';
        this.name = '';

      },
      delet(id){

        // this.list.some((item,i) => {
        //   if (item.id == id){
        //     this.list.splice(i,1)
        //     return true;
        //   }
        // })


        var  index = this.list.findIndex(item => {
          if (item.id == id) {
            return true;
          }
        });
        this.list.splice(index,1)
      },
      search(keyword){

        //     var newList = [];
        // //  遍历数组  找到与关键字匹配的数据
        //   this.list.forEach(item => {
        //     if (item.name.indexOf(keyword) != -1){
        //       newList.push(item);
        //     }
        //   })
        //   return newList;

        //直接
        return  this.list.filter(item => {

          //string.includes（‘要包含的关键字’）  ，如果包含 返回true 否则返回false
          if(item.name.includes(keyword)){
            return item;
          }
        });


      }

    }

  })
</script>
</body>
</html>
